<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    request.setAttribute("basePath", basePath);
%>
<html>
<head>
    <meta charset="utf-8">
    <title>比赛报名</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${basePath}css/layui.css" media="all">
    <style type="text/css">
        #center_dic {
            text-align: center;
        }

        .foot {
            z-index: 99;
            width: 100%;
            left: 0;
            position: absolute;
            bottom: 12px;
        }

        .footer .foot {
            text-align: center;
            font-size: 14px;
            color: gray
        }

        .desc {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="center_dic">
    <c:forEach var="notices" items="${notices }">
        <fieldset class="layui-elem-field">
            <legend>
                    ${notices.noticeTitle}
            </legend>
            <p class="desc">${notices.noticeDesc}</p>
        </fieldset>
        <br>
    </c:forEach>
</div>
<table class="layui-hide" id="match" lay-filter="match"></table>
<script type="text/html" id="matchBar">
    <a title="报名" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="sign">报名</a>
</script>
<div class=footer>
    <div class=foot>
        <p>© 河北民族师范学院-大数据应用研发工作室-ACM爱好者协会 版权所有
    </div>
</div>
<script src="${basePath}js/layui.all.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'table', 'jquery'], function () {
        var $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            table = layui.table;
        if ('${msg}' !== '') {
            layer.msg('${msg}');
        }

        form.on('select(firstSelect)', function () {
            var fid = $("#firstSelect").val();
            $.ajax({
                url: "RegServlet?action=num",//请求地址
                type: "GET",//请求方式
                dataType: "JSON",//返回数据类型
                data: {fid: fid},//发送的参数
                success: function (data) {

                    $('#info').text("");
                    $('#info').append("已报名人数人：" + data["num"] + "，剩余人数：" + data["maxNumber"]);
                    form.render();
                },
                error: function () {
                    //失败执行的方法
                    alert("error");
                }
            });
        });
        table.render({
            elem: '#match',
            cellMinWidth: 80,
            cols: [
                [{
                    field: 'matchId',
                    title: '比赛编号',
                    sort: true,
                    align: 'center'
                }, {
                    field: 'matchName',
                    title: '比赛名称',
                    sort: true,
                    align: 'center'
                }, {
                    field: 'beginTime',
                    title: '开始时间',
                    sort: true,
                    align: 'center'
                }, {
                    field: 'endTime',
                    title: '结束时间',
                    sort: true,
                    align: 'center'
                }, {
                    field: 'maxNumber',
                    title: '人数限制',
                    sort: true,
                    align: 'center'
                }, {
                    field: 'num',
                    title: '已报人数',
                    sort: true,
                    align: 'center'
                }, {
                    field: 'remark',
                    title: '操作',
                    // toolbar: '#matchBar',
                    align: 'center',
                    width: 180
                }]
            ],
            data: ${matchJson},
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'],
                groups: 5,
                first: '首页',
                last: '尾页'
            }
        });
        table.on('tool(match)', function (obj) {
            var data = obj.data;
            if (obj.event === 'sign') {
                self.location = '/RegServlet?action=sign&matchId=' + data.matchId;
            }
            if (obj.event === 'unSign') {
                self.location = '/RegServlet?action=unSign&matchId=' + data.matchId;
            }
        });
    });
</script>
</body>
</html>
